<template>

    <div class="fl offcn19_zqleft">
        <p class="offcn19_location" v-html="topNavHtml">
            <a href="/" target="_blank">首页</a>&gt;<a href="/list" target="_blank">系统课程</a>&gt;<a href="./list-180.html" target="_blank">新媒体营销</a>
        </p>

        <div class="offcn19_showtop">
            <table class="offcn19_htab" width="730" border="0" cellpadding="0" cellspacing="0">
                <tbody><tr>
                    <td width="730">
                        <div class="offcn19_htabn">
                            <h1 class="offcn19_showtit" :title="course.title">{{course.title}}</h1>
                            <p class="offcn19_abstract" title=""></p>
                            <hr>
                            <div class="offcn19_show_box clearfix">
                                <b class="fl offcn19_showlf">课程安排 </b>
                                <div class="fr offcn19_showtime">
                                    <strong>
                                        有效期
                                        {{course.countDay}}天 </strong>
                                    <span>|</span>{{course.countHour}}课时
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody></table>
        </div>
        <ul class="offcn19_nav clearfix">
            <li :class="['offcn19_anchor fl',{ 'on':activeCode===0}]" @click="setActiveCode(0)" ><em class="offcn19_chbot"></em>课程介绍</li>
            <li :class="['offcn19_anchor offcn19_anchor_plan fl',{ 'on':activeCode===1}]" @click="setActiveCode(1)" ><em class="offcn19_chbot"></em>课程安排
                ({{totalLesson}})
            </li>
            <li :class="['offcn19_anchor fl',{ 'on':activeCode===2}]"  @click="setActiveCode(2)"><em class="offcn19_chbot"></em>课程评价</li>
            <li :class="['offcn19_anchor fl',{ 'on':activeCode===3}]"  @click="setActiveCode(3)"><em class="offcn19_chbot"></em>常见问题</li>
        </ul>
        <!--        内容-->
        <div class="offcn19_wrap offcn19_wrap1" v-html="course.content" v-show="activeCode===0" > </div>
        <div class="offcn19_wrap" v-show="activeCode===1">
            <div class="zg19new_typebox ">
                <div class="zg19new_typebox_wide">
                    <p class="zg19new_typebox_cont">
                        <a href="javascript:void(0);" class="zg19new_type0 on">全部</a>
                        <a href="javascript:void(0);" class="zg19new_type2">视频({{totalLesson}})</a>
                    </p>
                </div>
            </div>
            <div class="zg19new_wrap ">
                <div class="zg19new_chapter">
                    <div class="zg19new_chpcont">
                        <ul class="zg19new_class">
                            <!--                            视频列表-->
                            <li class="clearfix    zg19new_ct2 " v-for="video in lessonList">
                                <div class="clearfix offcn19_coursebox">
                                    <em class="ioc"></em>
                                    <div class="fl zg19new_ctname zg19new_ctname1">
                                        <a   :title="video.title">{{video.title}}</a>
                                    </div>
                                    <div class="zg19new_cttime fr">
                                            <span class="r1 ">
                                            {{video.totalTime}}
                                            </span>
                                        <a class="r2 Q-directbuy-btn " @click="buyCourse" v-show="!course.bought" >
                                            <i>报名学习</i>
                                        </a>
                                        <router-link :to="{path:'video-'+video.id,query:{courseId:course.id}}" class="r2 Q-directbuy-btn " target="_blank" v-show="course.bought" >
                                            <i>播放视频</i>
                                        </router-link>
                                    </div>
                                </div>
                                <div class="shadow"></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--        评论-->
        <div class="offcn19_wrap" v-show="activeCode===2">
            <div class="mBotL_Comment zg_Comment">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                        <th width="120">留下你的宝贵打分</th>
                        <td>
                            <p class="zg_comstar"><span></span><span></span><span></span><span></span><span></span>
                                <i class="value_result"></i></p>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <textarea id="content" data-cid="165633" class="zg_comtext" placeholder="购买课程后才能评价~"></textarea><span class="zishu">0</span>/500
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="button" class="evalBut dispingjia" value="评价">
                            <div class="checkbox">
                                <input id="checkbox" name="checkbox" type="checkbox">
                                <label for="checkbox">匿名评价</label>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="zg19_comments">
                <p class="zg19_nocomments">暂无评价</p>
            </div>
            <input type="hidden" id="totalnum" value="0">

        </div>
        <!--        常见问题-->
        <div class="offcn19_wrap"  v-show="activeCode===3">
            <ul class="zg19_problem">
                <li>
                    <p class="zg19_pro_tit">购买课程后如何获得听课账号？</p>
                    <p class="zg19_pro_anw">使用购课时输入的手机号登录即可</p>
                </li>
                <li>
                    <p class="zg19_pro_tit">注册时提示用户已存在或忘记密码怎么办？</p>
                    <p class="zg19_pro_anw">点击<a href="./foreuser/forget">./foreuser/forget</a>，根据提示操作重新设置密码，然后登录学习即可
                    </p>
                </li>
                <li>
                    <p class="zg19_pro_tit">购买后如何进行听课？</p>
                    <p class="zg19_pro_anw">
                        您购买的课程支持手机APP、电脑网页和手机网页进行学习。方式一：手机下载“IT优学”APP，登录账号后进入“我的课程”即可学习；方式二：电脑及手机浏览器进入IT优学<a href="./">http://xue.ujiuye.com</a>，登录账号后进入“我的课程”即可学习
                    </p></li>
                <li>
                    <p class="zg19_pro_tit">课程可以使用多久，是否有有效期？</p>
                    <p class="zg19_pro_anw">有效期内课程的直播、录播和资料等课件可反复学习；超过有效期，课程的全部内容将无法使用学习（含缓存视频）</p>
                </li>
                <li>
                    <p class="zg19_pro_tit">课程有没有学习次数限制？</p>
                    <p class="zg19_pro_anw">中公优学网校课程在有效期内，可以随时学习，反复学习，没有学习次数限制</p>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>

    export default {
        name:'DetailLeft',
        props:{
            course:{},
            lessonList: {
                type:Array,
                default:function () {
                    return []
                }
            },
            showBuy:true
        },
        data:function () {
            return {
                activeCode:0,

            }
        },
        computed:{
            topNavHtml:function () {
                let defHtml='<a href="/" target="_blank">首页</a>&gt;<a href="/list" target="_blank">系统课程</a>'
                if(this.course){
                    defHtml = defHtml + '&gt;<a href="/list-'+this.course.categoryId+'" target="_blank">'+this.course.categoryName+'</a>'
                    defHtml = defHtml + '&gt;<a href="/list-'+this.course.subjectId+'" target="_blank">'+this.course.subjectName+'</a>'
                }
                return defHtml
            },
            totalLesson:function () {
                return this.lessonList? this.lessonList.length:0
            }
        },
        methods:{
            setActiveCode:function (code) {
                this.activeCode = code
            },
            buyCourse:function () {
                this.$emit('buyCourse')
            }
        }
    }

</script>

<style>

</style>